<!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>普通用户认证审核管理</title> 
    <link rel="shortcut icon" href="favicon.ico">
	<#import "/common/import.ftl" as import>
    <@import.tableManagerImportCss/>
    <link href="${WEB_PATH}/resources/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet">
    <link href="${WEB_PATH}/resources/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <style>
    	.demo:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "条件查询：";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.demo {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		}
		.search{
		    width:300px;
		}
    </style>
    <link href="${WEB_PATH}/resources/js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <!-- Panel Other -->
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>平台用户</h5>
                <div class="ibox-tools">
                </div>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">  
                    <div class="col-sm-12">
                        <!-- Example Events -->
                        <div class="example-wrap"> 
                            <div class="example"> 
                            	<div style="" class="demo ui-sortable">
                            		 <div class="row"  style="padding-bottom: 10px;">
			                            <div class="col-sm-3">
			                                <div class="form-group">
			                                    <label>用户类型：</label>
						                        <select data-placeholder="选择用户类型" id="userType" name="userType" class="chosen-select form-control" multiple>
												   <option value="st">省厅用户</option> 
												   <option value="dz">地州用户</option> 
												   <option value="jcjg">检测机构用户</option> 
												</select> 
			                                </div>
			                            </div> 
			                            <div class="col-sm-3" id="organization_id" >
						                    <div class="form-group">
						                        <label>所属组织部门：</label>
						                         <div class="input-group colorpicker-demo2 colorpicker-element">
								                    <input id="organizationName" name="organizationName" class="form-control dropdown-toggle" readonly type="text" placeholder="请选择组织部门"  value="${user.organization.name}" style="background-color: #fff;" >
								            		<input id="organizationId" name="organization.ID"  type="hidden"  value="${user.organization.ID}" >
								            		<input id="organization_code" name="organization_code"  type="hidden" value="${user.organization.code}" >
								                	<span class="dropdown-toggle input-group-addon  btn btn-white btn-bitbucket" data-toggle="dropdown" id="organization"><i class="fa fa-user-md"></i></span>
								                	<div class="dropdown-menu m-t-xs pull-right" id="organization_tree" style="width: 100%;">
								                        <div id="organizationTree" style="padding: 10px;height:300px;overflow-y:scroll;"></div>
								                    </div>
								                </div>
											</div>
						                </div> 
						                <div class="col-sm-3" id="tsorganizationInfo"  >
						                    <div class="form-group">
						                        <label>所属检测机构：</label>
						                        <select data-placeholder="选择所属检验机构" id="tsorganizationInfoId" name="tsorganizationInfoId"  class="chosen-select form-control" multiple>
						                           <@tsorganizationInfos>
								                       <#list tsorganizationInfos as tsorganizationInfo >
													       <option value="${tsorganizationInfo.ID}" hassubinfo="true">${tsorganizationInfo.JYJGMC}</option>
													   </#list>
												   </@tsorganizationInfos>
												</select>
						                    </div>
						                </div>  
						                <div class="col-sm-2">
			                                <div class="form-group">
			                                    <label>状态：</label>
						                        <select data-placeholder="选择用户状态" id="status" name="status" class="chosen-select form-control" multiple>
												   <option value="start">启用</option> 
												   <option value="stop">停用</option> 
												</select> 
			                                </div>
			                            </div>  
			                            <div class="col-sm-1" style="padding-top: 22px;">
			                                 <button type="button" class="btn btn-primary" id="search"><i class="fa fa-search"></i>&nbsp;&nbsp;查询</button>
			                            </div> 
			                        </div> 
			                    </div>
                                <div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
                                	<button type="button" class="btn btn-outline btn-default" data-toggle="modal" id="addUser" >
                                        <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>&nbsp;&nbsp;新增用户
                                    </button>
                                    <button type="button" class="btn btn-outline btn-default" data-toggle="modal" id="editUser" >
                                        <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>&nbsp;&nbsp;修改用户
                                    </button>
                                    <button type="button" class="btn btn-outline btn-default" data-toggle="modal" id="delUser" >
                                        <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>&nbsp;&nbsp;删除用户
                                    </button> 
                                    <button type="button" class="btn btn-outline btn-default" data-toggle="modal" id="assignedRole" >
                                        <i class="iconfont" style="font-size:14px;font-style:normal;" >&#xe621;</i>&nbsp;&nbsp;角色分配
                                    </button> 
                                    <button type="button" class="btn btn-outline btn-default" data-toggle="modal" id="resetPassWord" >
                                        <i class="fa fa-expeditedssl" aria-hidden="true"></i>&nbsp;&nbsp;重置密码
                                    </button>
                                </div>
                                <table id="exampleTableEvents"  data-mobile-responsive="true" >
                                    <thead>
                                        <tr>
                                            <th data-field="state" data-radio="true"></th>  
                                            <th data-field="id" data-visible = "false" >id</th>  
								            <th data-field="account" >账户号</th>  
								            <th data-field="name" >姓名</th>  
								            <th data-field="phone" >手机号</th> 
								            <th data-field="userType" data-formatter="formatUserType">用户类型</th> 
								            <th data-field="organization" data-formatter="formatOrganization">所属组织机构</th> 
								            <th data-field="tsorganizationInfo" data-formatter="formatTsorganizationInfo">所属检测机构</th> 
								            <th data-field="login_count"  >登录次数</th>
										    <th data-field="cjsj"  data-formatter="formatTime" >创建日期</th>
										    <th data-field="last_login_time"  data-formatter="formatTime" >最后登录时间</th>
								            <th data-field="status" data-editable="true" data-type = "select" data-save = "service" data-validate = "required" data-source="${WEB_PATH}/global/data/getUserStatusList.do">状态</th>  
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <!-- End Example Events -->
                    </div>
                </div>
            </div>
        </div>
        <!-- End Panel Other -->
    </div>
    
    <div id="aut_win"></div>
    <@import.tableManagerImportScript/>
    <script src="${WEB_PATH}/resources/js/plugins/jsTree/jstree.min.js"></script>
    <script src="${WEB_PATH }/resources/js/plugins/fancybox/jquery.fancybox.js"></script>
    <script >
    	$(function(){
    		$(window).resize(function () {
		        $('#exampleTableEvents').bootstrapTable('resetView');
		    });
		    $("#userType").chosen({width:'100%'});
		    $("#status").chosen({width:'100%'});
		    $("#tsorganizationInfoId").chosen({width:'100%'});
		    
		    $("#organization").on("click",function(){
				var display =$('#organization_tree').css('display');
				if(display == 'none'){
				  $("#organization_tree").show();
				}else{
				  $("#organization_tree").hide();
				}
			});
			$('#organizationTree').jstree({'core' : {
				 'data': ${json}
			}}).bind("loaded.jstree", function () { 
	        }).bind('changed.jstree', function(event,data) {
	           $("#organizationName").val(data.node.text);
		       $("#organizationId").val(data.node.original.id);
		       $("#organization_tree").hide();
		    });  
		    function queryParams(params) {
		        var temp = {  
			        limit: params.limit,  
			        offset: params.offset, 
			        type_serch: $("#userType").val() != null ? $("#userType").val().join(","):$("#userType").val(),
			        status_serch: $("#status").val() != null ? $("#status").val().join(","):$("#status").val(),
			        search:params.search,
			        organization_code:$("#organizationId").val(),
			        jcjgIds:$("#tsorganizationInfoId").val() != null ? $("#tsorganizationInfoId").val().join(","):$("#tsorganizationInfoId").val(),
			        maxrows: params.limit,
			        pageindex:params.pageNumber,
		        };
		        return temp;
			}
    		//加载table数据
	    	$("#exampleTableEvents").bootstrapTable({
	            url: "${WEB_PATH }/system/user/getUserAllPage.do",
	            method: 'get',
	            search:true,
	            pagination:true,
	            pageNumber:1,  
	            uniqueId:"id",
	            pageSize:10,   
	            showRefresh:true, 
	            showColumns:true,
	            iconSize: "outline",
	            toolbar: "#exampleTableEventsToolbar",
	            sidePagination: "server", //设置为服务器端分页
	            queryParams: queryParams,//参数
	            minimumCountColumns: 1, 
	            search: true,    //隐藏搜索框
	            clickToSelect: true, 
	            icons: {
	                refresh: "glyphicon-repeat", 
	                columns: "glyphicon-list"
	            }
	        });
	        $('input.form-control.input-outline').attr("placeholder","请输入账号/姓名/联系电话"); //设置搜索提示信息
	        
        });
         //点击查询搜索
		$("#search").click(function(){
			$("#exampleTableEvents").bootstrapTable('refresh');
		});
		//点击新增按钮
		$("#addUser").click(function(){
			layer.open({
			      type: 2,
			      title: '<span style="color: #ed5565">新增用户</span>',
			      shadeClose: false,
			      shade: 0.3,
			      maxmin: false, //开启最大化最小化按钮
			      area: ['45%', '75%'],
			      content: "${WEB_PATH }/system/user/view/adduser.do",
			      btn: ['确定','取消'],
			      yes: function(index, layero){
				      var body = layer.getChildFrame('body', index);
				      var iframeWin = window[layero.find('iframe')[0]['name']];
				      iframeWin.saveInfo();
				  },
				  cancel: function(){
				  	  $('#addUser').attr("disabled",false); 
					  layer.closeAll();
				  }
			});
		});
		
		//点击修改按钮
		$("#editUser").click(function(){
		    var selectRow = $("#exampleTableEvents").bootstrapTable('getSelections');
	        if(1 != selectRow.length){
			    layer.msg('请选择您需要修改的用户信息！', {icon: 5}); 
			    return ;
	       	}
	       	var userInfo = selectRow[0];
			layer.open({
			      type: 2,
			      title: '<span style="color: #ed5565">修改用户信息</span>',
			      shadeClose: false,
			      shade: 0.3,
			      maxmin: false, //开启最大化最小化按钮
			      area: ['55%', '60%'],
			      content: "${WEB_PATH }/system/user/view/edituser.do?userId="+userInfo.id,
			      btn: ['确定','取消'],
			      yes: function(index, layero){
				      var body = layer.getChildFrame('body', index);
				      var iframeWin = window[layero.find('iframe')[0]['name']];
				      iframeWin.updateInfo();
				  },
				  cancel: function(){
					  layer.closeAll();
				  }
			});
		});
		
		//点击修改按钮
		$("#delUser").click(function(){
		    var selectRow = $("#exampleTableEvents").bootstrapTable('getSelections');
	        if(1 != selectRow.length){
			    layer.msg('请选择您需要删除的用户信息！', {icon: 5}); 
			    return ;
	       	}
	       	var userInfo = selectRow[0];
			layer.confirm('您确定要删除用户：['+userInfo.name+']吗？', {
				   btn: ['确定','取消'] 
			}, function(){
			   $.yilinAjax({
			   	  	type:'POST',
			   	  	loadmsg:'提交中......',
			   	  	url:'${WEB_PATH }/system/user/del.do', 
			   	  	data:{userIds:userInfo.id},
	        		errorcallback:null,
	        		successcallback:successUpdateColumn
			   	});
			}, function(index){
				layer.close(index);
			});
		});
        //重置用户密码
        $("#resetPassWord").click(function(){
        	var selectRow = $("#exampleTableEvents").bootstrapTable('getSelections');
        	var account = selectRow[0]; 
        	 if(1 != selectRow.length){
			    layer.msg('请选择一行您要重置密码的用户，一次有且只有一个用户。', {icon: 5}); 
			    return ;
	       	} 
    	  	layer.confirm('尊敬的用户您好：<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red">你确定重置用户：【'+account.name+'】的密码吗？</span>',{icon: 3, title:'重置密码信息提示',btn: ['确定','取消']},
    		function(){
			  	updateResetPassWord(account.id);
			}, function(){
				
			});
        });
        
         $("#assignedRole").click(function(){
        	var selectRow = $("#exampleTableEvents").bootstrapTable('getSelections');
	        if(1 != selectRow.length){
			    swal({
			        title: "选择修改角色操作错误",
			        text: "请选择一行您要设置角色的用户信息，一次有且只有一个用户信息。"
			    })
			    return ;
	       	}
	       	var userInfo = selectRow[0];  
	       	$("#aut_win").load("${WEB_PATH }/system/user/view/setrole.do?userId="+userInfo.id);
        });
        
        function success(result){  
			if(result.success == true){ 
				swal({
			        title: "操作成功",
			        text: result.msg
		    	})
		    	$("#exampleTableEvents").bootstrapTable('refresh');
			}else{
				$('#saveBut').attr("disabled",false);    
				swal({
			        title: "操作失败",
			        text: result.msg
		    	})
			}
		}
        function formatOrganization(index, row, element){
        	var organizationName = "";
        	if(row.organization != null){
        		organizationName = '<span class="label label-primary">'+row.organization.name+'</span>';
        	}else{
        		organizationName = '<span class="label label-danger">未分配部门</span>';
        	}
			
        	return organizationName;
		}
		function formatTime(val){
		    if(val != null){
			 	var tt=new Date(val).toLocaleString(); 
	    		return tt; 
    		}else{
    			return "";
    		}
		}
		
		function updateColumn(updateColume){
			if(updateColume.field == "status" && updateColume.field_value == "delete"){
				var userInfo = $("#exampleTableEvents").bootstrapTable('getRowByUniqueId', updateColume.id)
				layer.confirm('您确定要删除用户：['+userInfo.name+']吗？', {
				   btn: ['确定','取消'] 
				}, function(){
				   $.yilinAjax({
				   	  	type:'POST',
				   	  	loadmsg:'提交中......',
				   	  	url:'${WEB_PATH }/system/user/updateAccountFiled.do', 
				   	  	data:updateColume,
		        		errorcallback:null,
		        		successcallback:successUpdateColumn
				   	});
				}, function(index){
					  $("#exampleTableEvents").bootstrapTable('updateRow', {
		                index: updateColume.index,
		                row:userInfo
		              });
		              layer.close(index); 
				});
			}
			 
		}
		
		
		function successUpdateColumn(result) {
			if(result.success == true){
				layer.msg(result.msg, {icon: 1}); 
				$("#exampleTableEvents").bootstrapTable('refresh');
			}else{
				layer.msg('<font color="red">'+data.msg+'</font>', {icon: 5}); 
			}
		}
		
		
		function updateResetPassWord(id){
			 $.yilinAjax({
		   	  	type:'POST',
		   	  	loadmsg:'提交中......',
		   	  	url:'${WEB_PATH }/system/user/updateResetPassWord.do', 
		   	  	data:{id:id},
        		errorcallback:null,
        		successcallback:successResetPassWord
		   	});
		}
		
		
		function successResetPassWord(result) { 
			if(result.success == true){
				swal("保存成功！", result.msg, "success");
				$("#exampleTableEvents").bootstrapTable('refresh');
			}else{
				swal("保存失败！", result.msg, "error");
			}
		}
		
		
		function formatterStatus(val){
			var auditName = "";
			if(val == "start"){
				auditName = '<span class="label label-primary">启用</span>';
			}else if(val == "stop"){
				auditName = '<span class="label label-warning">停用 </span>';
			}else if(val == "delete"){
				auditName = '<span class="label label-danger">删除</span>';
			} 
        	return auditName;
		} 
		function formatUserType(val){
			var auditName = "";
			if(val == "st"){
				auditName = '<span class="label label-success">省厅用户</span>';
			}else if(val == "dz"){
				auditName = '<span class="label label-info">地州用户 </span>';
			}else if(val == "jcjg"){
				auditName = '<span class="label label-primary">检测机构用户</span>';
			} 
        	return auditName;
		} 
		
		function formatTsorganizationInfo(index, row, element){
        	var organizationName = "";
        	if(row.tsorganizationInfo != null){
        		organizationName = row.tsorganizationInfo.jyjgmc;
        	}else{
        		organizationName = '<span class="label label-danger">无</span>';
        	}
			
        	return organizationName;
		}
        
    </script>
</body>

</html>